import { MAX_ROW_COUNTS_IN_COLLAPSED, ITEM_WIDTH, ITEM_HEIGHT, ITEM_H_GUTTER, ITEM_V_GUTTER } from './config';

export function getBoxStyle(collapsed) {
    if (collapsed) {
        return {
            maxHeight: MAX_ROW_COUNTS_IN_COLLAPSED * (ITEM_HEIGHT + ITEM_V_GUTTER) - ITEM_V_GUTTER,
            overflow: 'hidden',
        };
    }
}

export function getLayoutStyle() {
    return {
        display: 'grid',
        gridTemplateColumns: `[c1] repeat(auto-fill, ${ITEM_WIDTH}px) [c2] minmax(${ITEM_WIDTH}px, 1fr) [c3]`,
        gap: `${ITEM_V_GUTTER}px ${ITEM_H_GUTTER}px`,
    };
}

export function getTailStyle(rowIndex) {
    return {
        gridColumn: 'c2 / c3',
        gridRowStart: rowIndex,
        textAlign: 'right',
    };
}

export function getFormItemStyle() {
    return {
        marginBottom: 0,
        width: ITEM_WIDTH,
    };
}

export function getItemCountsPerRow(boxWidth) {
    if (boxWidth) {
        return Math.floor((boxWidth + ITEM_H_GUTTER) / (ITEM_WIDTH + ITEM_H_GUTTER));
    }

    return undefined;
}

export function getRowCountsInExpanded(itemLength, itemCountsPerRow) {
    if (itemCountsPerRow) {
        return Math.ceil((itemLength + 1) / itemCountsPerRow);
    }

    return undefined;
}

export function isCollapseSwitchVisible(rowCountsInExpanded) {
    if (rowCountsInExpanded) {
        return rowCountsInExpanded > MAX_ROW_COUNTS_IN_COLLAPSED;
    }

    return false;
}

export function getTailRowIndex(collapsed, collapseSwitchVisible, rowCountsInExpanded) {
    if (rowCountsInExpanded) {
        return collapsed ? (collapseSwitchVisible ? MAX_ROW_COUNTS_IN_COLLAPSED : rowCountsInExpanded) : undefined;
    }

    return 1;
}
